<template>
	<view>
		<view v-if="roles.includes('user') && !isThird" class="group-container">
			<view class="group-name">
				<text class="widget"></text>
				<text>用车申请</text>
			</view>
			<view>
				<uni-grid :column="3" :show-border="false" :square="false">
					<uni-grid-item>
						<view class="item-container" @click="onClickGrid" data-type="bus-applycation">
							<text class="iconfont icon" style="color: #03A9F4;">&#xe62d;</text>
							<text class="text">用车申请</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="item-container" @click="onClickGrid" data-type="application-list">
							<text class="iconfont icon" style="color: #FF9800;">&#xe612;</text>
							<text class="text">我的申请</text>
							
							<view v-if="userCt > 0" style="position: absolute;right: 15px;top: 0;">
								<van-tag round type="danger">{{ userCt > 10 ? '10+' :userCt }}</van-tag>
							</view>
						</view>
					</uni-grid-item>
					<!-- <uni-grid-item>
						<view class="item-container" @click="onClickGrid" data-type="my-statistics">
							<text class="iconfont icon" style="color: #FF5722;">&#xebaf;</text>
							<text class="text">用车统计</text>
						</view>
					</uni-grid-item> -->
				</uni-grid>
			</view>
		</view>

		<view v-if="roles.includes('reviewer')" class="group-container" style="margin-top: 20rpx;">
			<view class="group-name">
				<text class="widget"></text>
				<text>用车审核</text>
			</view>
			<view>
				<uni-grid :column="3" :show-border="false" :square="false">
					<uni-grid-item>
						<view class="item-container" @click="onClickGrid" data-type="check-list">
							<text class="iconfont icon" style="color: #03A9F4;">&#xe630;</text>
							<text class="text">用车审核</text>
							
							<view v-if="reviewerCt > 0" style="position: absolute;right: 15px;top: 0;">
								<van-tag round type="danger">{{ reviewerCt > 10 ? '10+' :reviewerCt }}</van-tag>
							</view>
						</view>
					</uni-grid-item>
				<!-- 	<uni-grid-item>
						<view class="item-container" @click="onClickGrid" data-type="bus-applycation">
							<text class="iconfont icon" style="color: #FF5722;">&#xebaf;</text>
							<text class="text">审核统计</text>
						</view>
					</uni-grid-item> -->
				</uni-grid>
			</view>
		</view>
		
		<view v-if="roles.includes('controller')" class="group-container" style="margin-top: 20rpx;">
			<view class="group-name">
				<text class="widget"></text>
				<text>调度管理</text>
			</view>
			<view>
				<uni-grid :column="3" :show-border="false" :square="false">
					<uni-grid-item>
						<view class="item-container" @click="onClickGrid" data-type="dispatch">
							<text class="iconfont icon" style="color: #03A9F4;">&#xe684;</text>
							<text class="text">用车调度</text>
							
							<view v-if="controllerCt > 0" style="position: absolute;right: 15px;top: 0;">
								<van-tag round type="danger">{{ controllerCt > 10 ? '10+' :controllerCt }}</van-tag>
							</view>
						</view>
					</uni-grid-item>
					<uni-grid-item v-if="!isThird">
						<view class="item-container" @click="onClickGrid" data-type="user-req">
							<text class="iconfont icon" style="color: #FF9800;">&#xe8b5;</text>
							<text class="text">用户申请</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="item-container" @click="onClickGrid" data-type="bus-mgmt">
							<text class="iconfont icon" style="color: #FF5722;">&#xe612;</text>
							<text class="text">车辆管理</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="item-container" @click="onClickGrid" data-type="driver-mgmt">
							<text class="iconfont icon" style="color: #55aa00;">&#xe773;</text>
							<text class="text">司机管理</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>

		<view v-if="roles.includes('driver')" class="group-container" style="margin-top: 20rpx;">
			<view class="group-name">
				<text class="widget"></text>
				<text>行程管理</text>
			</view>
			<view>
				<uni-grid :column="3" :show-border="false" :square="false">
					<uni-grid-item>
						<view class="item-container" @click="onClickGrid" data-type="route-list">
							<text class="iconfont icon" style="color:#2a82e4">&#xf09c;</text>
							<text class="text">我的行程</text>
							
							<view v-if="driverCt > 0" style="position: absolute;right: 15px;top: 0;">
								<van-tag round type="danger">{{ driverCt > 10 ? '10+' :driverCt }}</van-tag>
							</view>
						</view>
					</uni-grid-item>
					<!-- 		<uni-grid-item>
						<view class="item-container" @click="onClickGrid" data-type="bus-applycation">
							<text class="iconfont icon" style="color: #FF5722;">&#xe7aa;</text>
							<text class="text">报销统计</text>
						</view>
					</uni-grid-item> -->
				<!-- 	<uni-grid-item>
						<view class="item-container" @click="onClickGrid" data-type="route-total">
							<text class="iconfont icon" style="color:#ff5733">&#xebaf;</text>
							<text class="text">行程统计</text>
						</view>
					</uni-grid-item> -->
				</uni-grid>
			</view>
		</view>
		
		<van-toast id="van-toast" />
		
	</view>

</template>

<script>
	import Toast from '@/wxcomponents/toast/toast'
	import utils from '@/common/utils.js'
	export default {
		data() {
			return {
				roles: [],
				driverCt:0,
				reviewerCt:0,
				controllerCt: 0,
				userCt:0
			}
		},
		async onLoad() {
			const userinfo = uni.getStorageSync("userinfo")
			if (!userinfo) {
				uni.reLaunch({
					url: '../login-main/login-main'
				})
			} else {
				
			}
		},
		async onShow() {
			const userinfo = uni.getStorageSync('userinfo')
			
			// await utils.req('/user/getUserDetail', {userId: userinfo.userId})
			
			this.roles = userinfo.roles
			console.log(userinfo.roles)
			if(userinfo.roles.includes('driver')){
				this.driverCt = await this.getCount('driver', 'dispatched')
			}
			
			if(userinfo.roles.includes('reviewer')){
				this.reviewerCt = await this.getCount('reviewer', 'created')
			}
			
			if(userinfo.roles.includes('controller')){
				this.controllerCt = await this.getCount('controller', 'allowed')
			}
			
			if(userinfo.roles.includes('user')){
				this.userCt = await this.getCount('user', 'adminComfirmed')
			}
		},
		methods: {
			async getCount(role, status){
				try{
					const userinfo = uni.getStorageSync("userinfo")
					const reqData={
						page:1,
						pagesize:11,
						statuses: [status],
						token:userinfo.token,
						dateStart: '1971-01-01 00:00',
						dateEnd: '2099-01-01 00:00'
					}
					let url = ''
					if(role == 'user'){
						url = '/order/queryUserOrders'
					}
					else if(role == 'reviewer'){
						url = '/order/queryReviewerOrders'
					}else if(role == 'driver'){
						url = '/order/getDriverOrders'
					}else if(role == 'controller'){
						if(this.isThird){
							reqData.isThird = true
						}
						url = '/order/queryControllerOrders'
					}
					let rspData = await utils.req(url, reqData)
					// console.log(1112211212)
					return rspData.list.length
				}catch(e){
					return 0
				}
			},
			onClickGrid(event) {
				const type = event.currentTarget.dataset.type
				
				if (type === 'bus-applycation') {
					uni.navigateTo({
						url: `../bus-applycation/bus-applycation`
					})
				} else if (type === 'application-list') {
					uni.navigateTo({
						url: `../bus-list/bus-list?role=user`
					})
				} else if (type === 'check-list') {
					uni.navigateTo({
						url: `../bus-list/bus-list?role=reviewer`
					})
				} else if (type === 'route-list') {
					uni.navigateTo({
						// url: `../route-list/route-list`
						url: `../bus-list/bus-list?role=driver`
					})
				} else if (type === 'route-total') {
					uni.navigateTo({
						url: `../driver-list/driver-list`
					})
				} else if (type === 'dispatch') {
					uni.navigateTo({
						url: `../bus-list/bus-list?role=controller`
					})
				} else if (type === 'user-req') {
					uni.navigateTo({
						url: `../req-handle/req-handle`
					})
				} else if (type === 'bus-mgmt') {
					uni.navigateTo({
						url: '../mbus-list/mbus-list?os=1'
					})
				}else if (type === 'driver-mgmt') {
					uni.navigateTo({
						url: '../driver-list/driver-list?os=1'
					})
				}

			}
		},
		computed:{
			isThird(){
				return uni.getStorageSync('userinfo').companyId != 1
			}
		}

	}
</script>

<style lang="scss">
	.group-container {
		background-color: #fff;

		// border-bottom: 1px solid $uni-border-color;
		.group-name {
			border-bottom: 1px solid $uni-border-color;
			padding: 15rpx 10rpx;

			.widget {
				border-left: 8rpx solid $uni-color-primary;
				margin-right: 20rpx;
			}

			text {}
		}
	}

	.item-container {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		padding: 30rpx;
		position: relative;

		.icon {
			font-size: 60rpx;
			margin-bottom: 16rpx;
		}
	}
</style>
